<template>
    <div id="app">
        <loading v-show="isLoading"></loading>
        <NavView v-show="isShow"></NavView>
        <transition name="slide-down">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>
        <FooterView></FooterView>
    </div>
</template>

<script>
    import NavView from './components/Nav.vue'
    import FooterView from './components/footer.vue'
    import {mapGetters,mapActions} from 'vuex'
    export default {
        name: 'app',
        computed: mapGetters([
            'isShow',
            'isLoading',
        ]),
        watch: {
            $route(to, from){
                if (to.path == '/useinfo') {
                    this.$store.dispatch('hideHeader');
                }else {
                    this.$store.dispatch('showHeader')
                }
            }
        },
        components: {
            NavView,
            FooterView
        }

    }
</script>

<style scoped>
    .slide-down-enter-active,.slide-down-leave-active{
        transition: all .5s;
        opacity: 0.7;
        transform: translateY(50px)
    }
    .slide-down-enter,.slide-down-leave-to{
        opacity: 1;
        transform: translateY(0);
    }

</style>
